<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="../css/dashboard.css" rel="stylesheet">


    <style>
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
    </style>

    <style>
        .hide{
            display: none;
        }
        .main{
            width: 90%;
        }
        .sidebar{
            width: 10%;
            top: 50px;
        }
        .col-md-offset-2{
            margin-left: 10%;
        }
        td>.cell{
            max-width: 350px;
            height: 18px;
            line-height: 18px;
            text-overflow: ellipsis;
            white-space: nowrap; /*禁止自动换行*/
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="app">
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column type="expand">
            <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">

                    <el-form-item label="jobName">
                        <span>{{ props.row.jobName }}</span>
                    </el-form-item>
                    <el-form-item label="jobAddr">
                        <span>{{ props.row.jobAddr }}</span>
                    </el-form-item>
                    <el-form-item label="jobInfoHtml">
                        <p v-html="props.row.jobInfoHtml"></p>
                    </el-form-item>
                    <el-form-item label="companyName">
                        <span>{{ props.row.companyName }}</span>
                    </el-form-item>
                    <el-form-item label="companyAddr">
                        <span>{{ props.row.companyAddr }}</span>
                    </el-form-item>
                    <el-form-item label="companyInfo">
                        <span>{{ props.row.companyInfo }}</span>
                    </el-form-item>
                </el-form>
            </template>
        </el-table-column>
        <el-table-column
                label="jobName"
                prop="jobName">
        </el-table-column>
        <el-table-column
                label="jobAddr"
                prop="jobAddr">
        </el-table-column>
        <el-table-column
                label="jobInfo"
                prop="jobInfo">
        </el-table-column>
        <el-table-column
                label="salary"
                prop="salary">
        </el-table-column>
        <el-table-column
                label="companyName"
                prop="companyName">
        </el-table-column>
    </el-table>

</div>
</body>
<script src="../js/jquery-3.5.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 必须先引入vue，  后使用element-ui -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app =new Vue({
        el: '#app',
        data: function() {
            return {
                tableData: []
            }
        },
        mounted() {
            axios.get("http://localhost:9092/list").then(res => {
                console.log(res.data.result);
                this.tableData = res.data.result
            })

            /*this.$http.get("http://localhost:9092/list").then(function(res){
                console.log(res)
                this.tableData = JSON.parse(res).result
            },function(){
                console.log("请求失败处理");
            })*/
            /*this.$http.get("http://localhost:9092/list").then(function (res) {
                console.log(res)
                this.tableData = JSON.parse(res).result
            })*/

           /* $.get("http://localhost:9092/list", function(result){









                //$("div").html(result);
                //console.log(result)
                let data = JSON.parse(result);
                if(data.code == 200) {
                    this.tableData = data.result
                    console.log(this.tableData)
                }
            })*/
        }
    })


    function jobInfo() {
        // $.get("/list", function(result)
        $.get("http://localhost:9092/list", function(result){
            //$("div").html(result);
            //console.log(result)
            let data = JSON.parse(result);
            if(data.code == 200){
                console.log(data.result)
                return data.result;
            }
        });
    }
</script>

</html>